<template>
  <CountUp
    class="CountUp"
    :end-val="count"
    :options="options"
    :decimalPlaces="2"
    :loop="loop"
    :delay="delay"
  ></CountUp>
</template>

<script setup lang="ts">
import { toRefs, reactive, watch, onMounted, onBeforeUnmount } from 'vue'
import CountUp from 'vue-countup-v3'
import { Odometer } from 'odometer_countup'

const props = defineProps({
  count: {
    type: Number,
    default: 0
  },
  decimalPlaces: {
    type: Number,
    default: 0
  },
  loop: {
    type: Boolean,
    default: true
  },
  delay: {
    type: Number,
    default: 10
  },
  separator: {
    type: String,
    default: ''
  }
})

const { separator } = toRefs(props)

const { count } = toRefs(props)
const pl = new Odometer({ duration: 1.0, lastDigitDelay: 0 })
const options = reactive({
  useEasing: true,
  useGrouping: true,
  decimalPlaces: props.decimalPlaces,
  separator: separator.value || ',', // 确保 separator 有默认值
  prefix: '',
  suffix: '',
  duration: 1,
  enableScrollSpy: true
  //   plugin: pl // 用于替换动画效果
})

// watch(count, () => {
//   if (!document.hidden) {
//     options.plugin = new Odometer({ duration: 1.0, lastDigitDelay: 0 })
//   }
// })

onMounted(() => {
  options.separator = separator.value
})

onBeforeUnmount(() => {})
</script>

<style lang="scss" scoped>
.CountUp {
  display: inline;
  z-index: 9999;
}
</style>
